<template>
  <div>
    <div class="div_1">
    	<img class="img_1" src="../assets/img/mi.png" />
    	<span class="span_1">我的购物车</span>
    	<span class="span_2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
    </div>

    <div class="div_2">
    	<div class="div_2_1">
    		<img class="img_2" src="../assets/img/cart/img_2.png" />
    	</div>
    	<div class="div_2_2">
    		<p class="p1" align="center">买购物车中商品的人还买了</p>
    		<table>
    			<tr>
    				<td>
    					<img style="height: 100%; width: 100%;" src="../assets/img/cart/gouwu.jpg"/>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_1.jpg" />
    					<p class="p2">小米活塞耳机 清新版</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_2.jpg" />
    					<p class="p2">米家互联网洗烘一体机10kg</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_3.jpg" />
    					<p class="p2">Redmi全自动波轮洗衣机1S </p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_4.jpg" />
    					<p class="p2">Redmi全自动波轮洗衣机 1A </p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<img src="../assets/img/cart/pms_5.png" />
    					<p class="p2">小米手环4 NFC版</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_6.png" />
    					<p class="p2">Redmi Note 8 Pro 6GB+128</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_7.jpg" />
    					<p class="p2">Redmi Note 8 6GB+128GB</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_8.jpg" />
    					<p class="p2">小米活塞耳机</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    				<td>
    					<img src="../assets/img/cart/pms_9.jpg" />
    					<p class="p2">米家互联网洗烘一体机 Pro 1</p>
    					<p class="p3">29元</p>
    					<p class="p4">568人好评</p>
    				</td>
    			</tr>
    		</table>
    	</div>
    	<div class="div_2_3">
    		<div class="div_2_3_1">
    			<ul>
    				<li class="li">
    					<i class="fa fa-bandcamp" aria-hidden="true"></i>
    					<a>预约维修服务</a>
    				</li>
    				<li class="li">
    					<i class="fa fa-undo" aria-hidden="true"></i>
    					<a>7天无理由退货</a>
    				</li>
    				<li class="li">
    					<i class="fa fa-undo" aria-hidden="true"></i>
    					<a>15天免费换货</a>
    				</li>
    				<li class="li">
    					<i class="fa fa-truck" aria-hidden="true"></i>
    					<a>满150元包邮</a>
    				</li>
    				<li>
    					<i class="fa fa-map-marker" aria-hidden="true"></i>
    					<a>520余家售后网点</a>
    				</li>
    			</ul>
    		</div>
    		<hr class="hr1" />
    		<div class="div_2_3_2">
    			<table class="table" >
    				<thead>
    					<tr>
    						<th>帮助中心</th>
    						<th>服务支持</th>
    						<th>线下门店</th>
    						<th>关于小米</th>
    						<th>关注我们</th>
    						<th>特色服务</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<td>账户管理</td>
    						<td>售后政策</td>
    						<td>小米之家</td>
    						<td>了解小米</td>
    						<td>新浪微博</td>
    						<td>F 码通道</td>
    					</tr>
    					<tr>
    						<td>购物指南</td>
    						<td>自助服务</td>
    						<td>服务网点</td>
    						<td>加入小米</td>
    						<td>官方微信</td>
    						<td>礼物码</td>
    					</tr>
    					<tr>
    						<td>订单操作</td>
    						<td>相关下载</td>
    						<td>授权体验店</td>
    						<td>投资者关系</td>
    						<td>联系我们</td>
    						<td>防伪查询</td>
    					</tr>
    				</tbody>
    			</table>
    			<hr class="hr2" />
    			<ul>
    				<li class="li_1">400-100-5678</li>
    				<li class="li_2">周一至周日 8:00-18:00</li>
    				<li class="li_3">（仅收市话费）</li>
    				<div class="div_2_3_2_1">
    					<i class="fa fa-commenting-o" aria-hidden="true"> 人工服务</i>
    				</div>
    			</ul>
    		</div>
    	</div>
    	<div class="div_2_4">
    		<img class="img_3" src="../assets/img/cart/Y07.png" />
    	</div>
    </div>
  </div>
</template>

<script>
  export default{
		data(){
			return{

			}
		},
		components:{

		},
		methods:{

		}
	}
</script>

<style type="text/css">
  /* @import url("../font-awesome/css/font-awesome.css"); */
  .div_1 {
    position: relative;
    width: 100%;
    height: 100px;
    border-bottom: 3px solid #ff700f;
  }

  .img_1 {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 22%;
    left: 10%;
  }

  .span_1 {
    position: absolute;
    top: 28%;
    left: 16%;
    font-size: 28px;
    color: #484544;
  }

  .span_2 {
    position: absolute;
    top: 46%;
    left: 26.2%;
    font-size: 12px;
    color: #a6979a;
  }

  .div_2 {
    position: relative;
    width: 100%;
    height: 1850px;
    background-color: #f5f5f5;
  }

  .div_2_1 {
    position: absolute;
    width: 80%;
    height: 430px;
    top: 40px;
    left: 10%;
    background-color: #FFFFFF;
  }

  .img_2 {
    position: absolute;
    width: 100%;
    height: 430px;
  }

  .div_2_2 {
    position: absolute;
    width: 80%;
    height: 775px;
    top: 520px;
    left: 10%;
    /* background: #4796FF; */
  }

  .p1 {
    font-size: 28px;
    color: #757c8b;
  }

  .div_2_2 table {
    width: 100%;
    height: 680px;
    /* background: #333333; */
  }

  table,
  td {
    border: 12px solid #f5f5f5;
    border-collapse: collapse;
    background: #FFFFFF;
  }

  table,
  td,
  img {
    width: 140px;
    height: 140px;
    text-align: center;
  }

  .p2 {
    font-size: 14px;
    color: #625969;
  }

  .p3 {
    font-size: 14px;
    color: #ff7f47;
  }

  .p4 {
    font-size: 14px;
    color: #ae9b99;
  }

  .div_2_3 {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 1340px;
    background: #FFFFFF;
  }

  .img_3 {
    position: absolute;
    width: 100%;
    height: 235px;
    top: 1640px;
  }

  .div_2_3 .div_2_3_1 {
    position: absolute;
    width: 80%;
    height: 60px;
    left: 7%;
  }

  .div_2_3 .div_2_3_1 ul {
    height: 100%;
    text-align: center;
    list-style: none;
  }

  .div_2_3 .div_2_3_1 ul li {
    line-height: 33px;
    display: inline-block;
    margin-left: 58px;
  }

  .div_2_3 .div_2_3_1 ul li i {
    color: #616161;
  }

  .div_2_3 .div_2_3_1 ul li a {
    color: #616161;
    font-size: 13px;
  }

  .div_2_3 .div_2_3_1 ul .li::after {
    content: "|";
    margin-left: 58px;
    margin-right: 15px;
    color: #616161;
  }

  .hr1 {
    position: absolute;
    width: 78%;
    left: 11%;
    top: 60px;
  }

  .div_2_3 .div_2_3_2 .table {
    position: absolute;
    border-collapse: collapse;
    width: 62%;
    left: 11%;
    top: 92px;
  }

  .div_2_3 .div_2_3_2 .table th {
    font-size: 12px;
    text-align: left;
    color: #424242;
  }

  .div_2_3 .div_2_3_2 .table td {
    text-align: left;
    height: 12px;
    width: 12px;
    font-size: 10px;
    color: #757575;
  }

  .hr2 {
    position: absolute;
    left: 73.5%;
    top: 92px;
    height: 120px;
  }

  .div_2_3 .div_2_3_2 ul {
    position: absolute;
    list-style: none;
    text-align: center;
    left: 74%;
    top: 86px;
  }

  .div_2_3 .div_2_3_2 ul .li_1 {
    font-size: 16px;
    line-height: 32px;
    color: #ff6700;
  }

  .div_2_3 .div_2_3_2 ul .li_2,
  .li_3 {
    font-size: 10px;
    line-height: 16px;
    color: #757575;
  }

  .div_2_3 .div_2_3_2 .div_2_3_2_1 {
    position: absolute;
    width: 90px;
    height: 25px;
    left: 32%;
    top: 80px;
    border: 1px solid #ff6700;
  }

  .div_2_3 .div_2_3_2 .div_2_3_2_1 i {
    font-size: 10px;
    color: #ff6700;
  }
</style>
